<template>
    <el-row type="flex" style="margin-top: 7px">
        <el-col :span="14">

        </el-col>
        <el-col :span="10" :offset="14"  style="text-align: right">
                          <span>
                            {{getName}}<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>

            <el-button size="mini" circle icon="el-icon-switch-button" style="margin-left: 20px"
                       @click.native="logout"/>

        </el-col>
    </el-row>
</template>

<script>
    import {getUsername} from "@/lib/tokenUtil";
    import {invalidToken} from "@/lib/tokenUtil";

    export default {
        name: "TopNav",
        computed:{
            getName() {
                return getUsername();
            }
        },
        methods: {
            logout() {
                this.$confirm("是否确认退出？","提示信息",{
                    confirmButtonText:"确定",
                    cancelButtonText:"取消",
                    type:"info"
                }).then(()=> {
                    invalidToken();
                    this.$router.push({name:"login"})
                }).catch(err =>{})
            },

        }
    }
</script>

<style lang="scss">
.el-header {
    background-color: #1F9FFF;
}
</style>